<template>
  <el-container>
    <el-main>
      <div v-if="users.length">
        <el-row class="houselist" v-for="item in users" :key="item.id">
          <el-col :span="24">
            <div
              class="block"
              @click="$router.push('/userdetail?id=' + item.id)"
            >
              <div class="user">
                <el-avatar
                  class="avatar"
                  :size="50"
                  :src="item.avatarUrl"
                ></el-avatar>
                <p class="username">{{ item.userName }}</p>
              </div>

              <div class="info">
                <el-descriptions>
                  <el-descriptions-item label="昵称">{{
                    item.nikeName
                  }}</el-descriptions-item>
                  <el-descriptions-item label="性别">{{
                    item.gender === 0 ? "女" : "男"
                  }}</el-descriptions-item>
                  <el-descriptions-item label="手机号">{{
                    item.phone
                  }}</el-descriptions-item>
                  <el-descriptions-item label="邮箱">{{
                    item.email
                  }}</el-descriptions-item>
                </el-descriptions>
              </div>
            </div>
          </el-col>
        </el-row>
      </div>
      <div v-else><nodata></nodata></div>
    </el-main>
  </el-container>
</template>


<script>
import request from "@/utils/request";
import nodata from "../../components/nodata.vue";
export default {
  components: {
    nodata,
  },
  data() {
    return {
      //获取localStorage中保存的后台返回的用户信息
      user: localStorage.getItem("user")
        ? JSON.parse(localStorage.getItem("user"))
        : {},
      users: [],
    };
  },
  created() {
    request.get("/roommate/list/" + this.user.id).then((res) => {
      if (res.code === 200) {
        this.users = res.data;
      } else {
        this.$notify.error(res.msg);
      }
    });
  },
};
</script>


<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.el-header,
.el-footer {
  background-color: #b3c0d1;
  color: #333;
  text-align: center;
  line-height: 60px;
}

.el-aside {
  background-color: #d3dce6;
  color: #333;
  text-align: center;
  line-height: 200px;
}

.el-main {
  /* background-color: #e9eef3; */
  color: #333;
  text-align: center;
  /* line-height: 160px; */
  overflow: hidden;
  margin-top: -20px !important;
}

body > .el-container {
  margin-bottom: 40px;
}

.el-container:nth-child(5) .el-aside,
.el-container:nth-child(6) .el-aside {
  line-height: 260px;
}

.el-container:nth-child(7) .el-aside {
  line-height: 320px;
}

/* 房源 */
.houselist {
  /* margin-bottom: 20px; */
  background-color: #fff;
  border-bottom: 1px dashed #e6e6e6;
  cursor: pointer;
  /* width: 900px; */
  width: 470px;
  height: 160px;
  padding: 20px;
  position: relative;
  /* border-top: 1px dashed black; */
  margin-left: -235px;
  left: 50%;
}
.el-col {
  border-radius: 4px;
}
/* .bg-purple-dark {
  background: #99a9bf;
} */
.bg-purple {
  background: #d3dce6;
}
.bg-purple-light {
  background: #e5e9f2;
}
/* .grid-content {
  border-radius: 4px;
  min-height: 36px;
} */

.block {
  position: relative;
}
.user {
  position: absolute;
  width: 200px;
  text-align: left;
  margin-top: -25px;
  margin-left: 50px;
}
.avatar {
  margin-left: -47px;
  margin-top: 20px;
}
.username {
  color: #333;
  font-size: 20px;
  font-weight: 700;
  font-family: "Microsoft YaHei";
  margin-left: 15px;
  margin-top: -48px;
}
.info {
  position: absolute;
  color: #797979;
  /* float: left; */
  left: 0%;
  top: 63px;
  font-size: 14px;
  overflow: hidden;
  /* padding-left: 20px; */
  width: 460px;
  text-align: left;
  font-family: Microsoft YaHei, 微软雅黑, Hiragino Sans GB, tahoma, arial,
    simhei;
}
</style>